<template>
    <div class="box">
        <div class="lt">
            <p class="lt-title">实时游客统计</p>
            <p class="lt-bg"></p>
            <p class="lt-message">可预约游客总量&nbsp;<span>99999</span>&nbsp;人</p>
        </div>
        <div class="lt-number">
            <span v-for="(item, index) in people" :key="index">{{ item }}</span>
        </div>
        <div class="lt-charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入echarts图表集成包
import * as echarts from 'echarts'
//引入水球图的包
import 'echarts-liquidfill'

let people = ref('216908人')
//获取组件实例
let charts = ref()

onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        series: [{
            type: 'liquidFill',  //图表类型：水球图
            data: [0.6, { direction: 'left', value: 0.6 }, 0.6],  //控制波浪波峰数量和高度的数据
            color: ['#29fcff', '#00ffff', '#1de9b6'],  //控制波浪颜色
            waveAnimation: true,  //波浪动画是否开启
            radius: '80%',  //控制水球图大小
            emphasis: {  //控制鼠标放置在水球图上时水球图的不透明度
                itemStyle: {
                    opacity: 0.5
                }
            },
            backgroundStyle: {
                color: '#0a2546',  //水球颜色
            },
            label: {  //控制水球图中间显示信息
                formatter: '预约量 60%',
                fontSize: 25,
                color: 'white',
            },
            outline: {
                itemStyle: {
                    borderDistance: 5,  // 调整光圈与水球的距离
                    borderWidth: 8,  //水球图外边宽
                    borderColor: '#29fcff',  //填充外边宽颜色
                }
            }
        },
        {
            type: 'pie',
            radius: ['55%', '70%'],
            data: [100],
            itemStyle: {
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [
                        {
                            offset: 0.82,
                            color: 'rgba(41, 252, 255, 0)' // 内圈颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(41, 252, 255, 0.7)' // 外圈颜色
                        }
                    ]
                }
            }
        }]
    })
})
</script>

<style scoped lang="scss">
.box {
    height: 100%;
    background: url(../../images/dataScreen-main-lt.png) no-repeat;
    background-size: 100% auto;
    margin-top: 15px;

    .lt {
        height: 53px;

        .lt-title {
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }

        .lt-bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: cover;
            margin: 10px 0 0 20px;
        }

        .lt-message {
            float: right;
            color: white;
            margin-right: 10px;

            span {
                color: #29fcff;
            }
        }
    }

    .lt-number {
        height: 45px;
        margin: 10px 30px 0 30px;
        display: flex;

        span {
            flex: 1;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 24px;
            color: #29fcff;
            background: url(../../images/total.png) no-repeat;
            background-size: cover;
        }
    }

    .lt-charts {
        height: 242px;
    }
}
</style>